import React, { useEffect, useState } from 'react';
import { Card, Form } from 'react-bootstrap';

const GameExperienceSettings = ({ config, setConfig }) => {
  // 组件内部默认配置
  const defaultConfig = {
  thirdPersonView: 1,
  crosshair: 1,
  disableDirectChat: false,
  disableGlobalChat: false,
    disableVoiceChat: false,
    vonCodecQuality: 10,
  lightingConfig: 0,
  personalLight: 0,
  vehicleDamage: 1,
  disableNight: 0,
  maxSimultaneousAI: 10,
  randomStartTime: 1,
  serverNameSuffix: '',
  preventZoneCleanup: 0,
  preventObjectCleanup: 0,
  preventBuildingCleanup: 0,
  disableRadar: 0,
  // 网络范围配置
  networkRangeClose: 20,
  networkRangeNear: 150,
  networkRangeFar: 1000,
  networkRangeDistantEffect: 4000,
  // 渲染距离和网络性能设置
  defaultVisibility: 1000,
  pingWarning: 150,
  pingCritical: 300,
  maxPing: 500,
  connectionTimeout: 30,
  maxBandwidth: 1024,
  disableVoiceChatSpatialization: false,
  disablePlayerRespawn: 0,
  disableDeathScreen: 0,
  disableBaseDamage: 0,
  disableContainerDamage: 0,
  // 调试设置
  enableDebugMonitor: 0,
  // 新增配置项
  disableDynamicWeather: 0,
  weatherDuration: 120,
  weatherForecast: 1,
  maxWindStrength: 5,
  disableRaidWarning: 0,
  raidWarningDelay: 10,
  nightVisionEnabled: 1,
  thermalVisionEnabled: 0
};

  // 组件内部状态，用于表单输入临时存储
  const [localConfig, setLocalConfig] = useState(defaultConfig);

  // 当外部config变化时，更新内部localConfig
  useEffect(() => {
    const mergedConfig = {
      ...defaultConfig,
      ...config
    };
    setLocalConfig(mergedConfig);
  }, [config]);

  // 处理配置变更，同时更新本地状态和全局配置
  const handleConfigChange = (key, value) => {
    setLocalConfig(prev => ({ ...prev, [key]: value }));
    setConfig(prev => ({ ...prev, [key]: value }));
  };

  return (
    <Card className="h-100 border-3 shadow-medium" style={{backgroundColor: 'rgba(26, 26, 26, 0.6)', backdropFilter: 'blur(15px)', borderColor: '#ff6b6b', boxShadow: '0 0 20px rgba(255, 107, 107, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(255, 107, 107, 0.2)'}}>
      <Card.Header style={{backgroundColor: 'rgba(40, 40, 40, 0.7)', backdropFilter: 'blur(15px)'}}>
        <h3 style={{color: 'var(--primary-color)'}}>游戏体验设置</h3>
      </Card.Header>
      <Card.Body style={{color: '#ffffff', maxHeight: '70vh', overflowY: 'auto'}}>
        {/* 视角和显示设置 */}
        <h4 style={{color: '#ff6b6b', marginBottom: '15px', borderBottom: '1px solid rgba(255,255,255,0.1)', paddingBottom: '5px'}}>视角和显示设置</h4>
        <div className="row mb-4">
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="thirdPersonView" 
                label="第三人称视角" 
                checked={localConfig.thirdPersonView === 1} 
                onChange={() => handleConfigChange('thirdPersonView', localConfig.thirdPersonView === 1 ? 0 : 1)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                允许玩家使用第三人称视角
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="crosshair" 
                label="准星显示" 
                checked={localConfig.crosshair === 1} 
                onChange={() => handleConfigChange('crosshair', localConfig.crosshair === 1 ? 0 : 1)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                在武器瞄准状态下显示准星
              </Form.Text>
            </Form.Group>
          </div>
        </div>

        {/* 聊天和语音设置 */}
        <h4 style={{color: '#ff6b6b', marginBottom: '15px', borderBottom: '1px solid rgba(255,255,255,0.1)', paddingBottom: '5px'}}>聊天和语音设置</h4>
        <div className="row mb-4">
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="disableDirectChat" 
                label="禁用直接聊天" 
                checked={localConfig.disableDirectChat} 
                onChange={() => handleConfigChange('disableDirectChat', !localConfig.disableDirectChat)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                禁用玩家之间的近距离聊天
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="disableGlobalChat" 
                label="禁用全局聊天" 
                checked={localConfig.disableGlobalChat} 
                onChange={() => handleConfigChange('disableGlobalChat', !localConfig.disableGlobalChat)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                禁用服务器全局聊天功能
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="disableVoiceChat" 
                label="禁用语音聊天" 
                checked={localConfig.disableVoiceChat} 
                onChange={() => handleConfigChange('disableVoiceChat', !localConfig.disableVoiceChat)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                禁用玩家之间的语音通信
              </Form.Text>
            </Form.Group>
          </div>
        </div>

        <div className="row mb-4">
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>语音聊天质量</Form.Label>
              <Form.Control 
                type="number" 
                min="1" 
                max="20" 
                value={localConfig.vonCodecQuality} 
                onChange={(e) => handleConfigChange('vonCodecQuality', parseInt(e.target.value) || 10)} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                控制语音聊天质量（1-20，值越高质量越好）
              </Form.Text>
            </Form.Group>
          </div>
        </div>

        {/* 游戏特色设置 */}
        <h4 style={{color: '#ff6b6b', marginBottom: '15px', borderBottom: '1px solid rgba(255,255,255,0.1)', paddingBottom: '5px'}}>游戏特色设置</h4>
        <div className="row mb-4">
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Check 
                  type="switch" 
                id="personalLight" 
                label="个人光源" 
                checked={localConfig.personalLight === 1} 
                onChange={() => handleConfigChange('personalLight', localConfig.personalLight === 1 ? 0 : 1)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                启用玩家角色周围的照明效果
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="vehicleDamage" 
                label="载具伤害" 
                checked={localConfig.vehicleDamage === 1} 
                onChange={() => handleConfigChange('vehicleDamage', localConfig.vehicleDamage === 1 ? 0 : 1)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                启用载具碰撞和战斗伤害
              </Form.Text>
            </Form.Group>
          </div>
        </div>
        <div className="row mb-4">
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="disableBaseDamage" 
                label="禁用建筑伤害" 
                checked={localConfig.disableBaseDamage === 1} 
                onChange={() => handleConfigChange('disableBaseDamage', localConfig.disableBaseDamage === 1 ? 0 : 1)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                设置为1以禁用围栏和瞭望塔的损坏/破坏
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="disableContainerDamage" 
                label="禁用容器伤害" 
                checked={localConfig.disableContainerDamage === 1} 
                onChange={() => handleConfigChange('disableContainerDamage', localConfig.disableContainerDamage === 1 ? 0 : 1)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                设置为1以禁用帐篷、桶、木箱和海箱的损坏/破坏
              </Form.Text>
            </Form.Group>
          </div>
        </div>

        {/* 高级游戏设置 */}
        <h4 style={{color: '#ff6b6b', marginBottom: '15px', borderBottom: '1px solid rgba(255,255,255,0.1)', paddingBottom: '5px'}}>高级游戏设置</h4>
        <div className="row mb-4">
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="disableNight" 
                label="禁用夜晚" 
                checked={localConfig.disableNight === 1} 
                onChange={() => handleConfigChange('disableNight', localConfig.disableNight === 1 ? 0 : 1)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                强制游戏始终保持白天状态
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="enableDebugMonitor" 
                label="启用调试监视器" 
                checked={localConfig.enableDebugMonitor === 1} 
                onChange={() => handleConfigChange('enableDebugMonitor', localConfig.enableDebugMonitor === 1 ? 0 : 1)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                控制是否在游戏中显示调试信息
              </Form.Text>
            </Form.Group>
          </div>
        </div>

        <div className="row mb-4">
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>夜晚亮度</Form.Label>
              <Form.Select 
                value={localConfig.lightingConfig} 
                onChange={(e) => handleConfigChange('lightingConfig', parseInt(e.target.value))} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
              >
                <option value="0">较亮的夜晚</option>
                <option value="1">标准夜晚</option>
                <option value="2">较暗的夜晚</option>
              </Form.Select>
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                控制服务器夜晚照明效果 (0=较亮, 1=标准, 2=较暗)
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>最大同时AI数量</Form.Label>
              <Form.Control 
                type="number" 
                min="0" 
                max="100" 
                value={localConfig.maxSimultaneousAI} 
                onChange={(e) => handleConfigChange('maxSimultaneousAI', parseInt(e.target.value) || 10)} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                服务器上同时存在的最大AI数量（默认：10）。较低值可减轻服务器负载，提高性能；较高值可增加游戏挑战性，但会消耗更多服务器资源。
              </Form.Text>
            </Form.Group>
          </div>
        </div>

        <div className="row mb-4">
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>服务器名称后缀</Form.Label>
              <Form.Control 
                type="text" 
                value={localConfig.serverNameSuffix || ''} 
                onChange={(e) => handleConfigChange('serverNameSuffix', e.target.value)} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
                placeholder="设置服务器名称后缀"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                添加到服务器名称后面的文本
              </Form.Text>
            </Form.Group>
          </div>
        </div>

        {/* 清理设置 */}
        <h4 style={{color: '#ff6b6b', marginBottom: '15px', borderBottom: '1px solid rgba(255,255,255,0.1)', paddingBottom: '5px'}}>清理设置</h4>
        <div className="row mb-4">
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="preventZoneCleanup" 
                label="防止区域清理" 
                checked={localConfig.preventZoneCleanup === 1} 
                onChange={() => handleConfigChange('preventZoneCleanup', localConfig.preventZoneCleanup === 1 ? 0 : 1)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                防止服务器清理闲置区域
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="preventObjectCleanup" 
                label="防止物体清理" 
                checked={localConfig.preventObjectCleanup === 1} 
                onChange={() => handleConfigChange('preventObjectCleanup', localConfig.preventObjectCleanup === 1 ? 0 : 1)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                防止服务器清理游戏物体
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="preventBuildingCleanup" 
                label="防止建筑清理" 
                checked={localConfig.preventBuildingCleanup === 1} 
                onChange={() => handleConfigChange('preventBuildingCleanup', localConfig.preventBuildingCleanup === 1 ? 0 : 1)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                防止服务器清理玩家建筑
              </Form.Text>
            </Form.Group>
          </div>
        </div>

        {/* 网络范围配置 */}
        <h4 style={{color: '#ff6b6b', marginBottom: '15px', borderBottom: '1px solid rgba(255,255,255,0.1)', paddingBottom: '5px'}}>网络范围配置</h4>
        <div className="row mb-4">
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>近距离网络范围 (米)</Form.Label>
              <Form.Control
                type="number"
                value={localConfig.networkRangeClose}
                onChange={(e) => handleConfigChange('networkRangeClose', parseInt(e.target.value) || 20)}
                min="1"
                max="1000"
                className="glass-input"
                style={{ backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff' }}
              />
              <Form.Text className="text-muted" style={{ color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem' }}>
                近距离物品对象（如背包）生成的网络气泡距离，默认值为20
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>近处库存网络范围 (米)</Form.Label>
              <Form.Control
                type="number"
                value={localConfig.networkRangeNear}
                onChange={(e) => handleConfigChange('networkRangeNear', parseInt(e.target.value) || 150)}
                min="50"
                max="5000"
                className="glass-input"
                style={{ backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff' }}
              />
              <Form.Text className="text-muted" style={{ color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem' }}>
                近处库存物品对象生成（消失+10%）的网络气泡距离，默认值为150
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>远处对象网络范围 (米)</Form.Label>
              <Form.Control
                type="number"
                value={localConfig.networkRangeFar}
                onChange={(e) => handleConfigChange('networkRangeFar', parseInt(e.target.value) || 1000)}
                min="500"
                max="10000"
                className="glass-input"
                style={{ backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff' }}
              />
              <Form.Text className="text-muted" style={{ color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem' }}>
                远处对象（库存物品除外）生成（消失+10%）的网络气泡距离，默认值为1000
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>特效网络范围 (米)</Form.Label>
              <Form.Control
                type="number"
                value={localConfig.networkRangeDistantEffect}
                onChange={(e) => handleConfigChange('networkRangeDistantEffect', parseInt(e.target.value) || 4000)}
                min="1000"
                max="15000"
                className="glass-input"
                style={{ backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff' }}
              />
              <Form.Text className="text-muted" style={{ color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem' }}>
                特效（目前仅音效）生成的网络气泡距离，默认值为4000
              </Form.Text>
            </Form.Group>
          </div>
        </div>

        {/* 渲染距离和网络性能设置 */}
        <h4 style={{color: '#ff6b6b', marginBottom: '15px', borderBottom: '1px solid rgba(255,255,255,0.1)', paddingBottom: '5px'}}>渲染距离和网络性能设置</h4>
        <div className="row mb-4">
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>默认可见性距离</Form.Label>
              <Form.Control
                type="number"
                value={localConfig.defaultVisibility}
                onChange={(e) => handleConfigChange('defaultVisibility', parseInt(e.target.value) || 1000)}
                min="500"
                max="10000"
                className="glass-input"
                style={{ backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff' }}
              />
              <Form.Text className="text-muted" style={{ color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem' }}>
                玩家默认可见性距离，影响可看到的物体数量和距离
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Label>警告Ping值</Form.Label>
              <Form.Control
                type="number"
                value={localConfig.pingWarning}
                onChange={(e) => handleConfigChange('pingWarning', parseInt(e.target.value) || 150)}
                min="50"
                max="1000"
                className="glass-input"
                style={{ backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff' }}
              />
              <Form.Text className="text-muted" style={{ color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem' }}>
                触发警告的Ping阈值
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Label>严重Ping值</Form.Label>
              <Form.Control
                type="number"
                value={localConfig.pingCritical}
                onChange={(e) => handleConfigChange('pingCritical', parseInt(e.target.value) || 300)}
                min="100"
                max="1500"
                className="glass-input"
                style={{ backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff' }}
              />
              <Form.Text className="text-muted" style={{ color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem' }}>
                触发严重警告的Ping阈值
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Label>最大Ping值</Form.Label>
              <Form.Control
                type="number"
                value={localConfig.maxPing}
                onChange={(e) => handleConfigChange('maxPing', parseInt(e.target.value) || 500)}
                min="200"
                max="3000"
                className="glass-input"
                style={{ backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff' }}
              />
              <Form.Text className="text-muted" style={{ color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem' }}>
                允许的最大Ping值，超过将被踢出
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>连接超时 (秒)</Form.Label>
              <Form.Control
                type="number"
                value={localConfig.connectionTimeout}
                onChange={(e) => handleConfigChange('connectionTimeout', parseInt(e.target.value) || 30)}
                min="5"
                max="120"
                className="glass-input"
                style={{ backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff' }}
              />
              <Form.Text className="text-muted" style={{ color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem' }}>
                设置连接超时时间
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>最大带宽 (KB/s)</Form.Label>
              <Form.Control
                type="number"
                value={localConfig.maxBandwidth}
                onChange={(e) => handleConfigChange('maxBandwidth', parseInt(e.target.value) || 1024)}
                min="512"
                max="10240"
                className="glass-input"
                style={{ backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff' }}
              />
              <Form.Text className="text-muted" style={{ color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem' }}>
                设置最大带宽限制
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Check
                type="switch"
                id="disableVoiceChatSpatialization"
                label="禁用语音聊天空间化"
                checked={localConfig.disableVoiceChatSpatialization}
                onChange={() => handleConfigChange('disableVoiceChatSpatialization', !localConfig.disableVoiceChatSpatialization)}
                style={{ color: '#ffffff' }}
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{ color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem' }}>
                禁用基于距离的语音效果
              </Form.Text>
            </Form.Group>
          </div>
        </div>

        {/* 死亡设置 */}
        <h4 style={{color: '#ff6b6b', marginBottom: '15px', borderBottom: '1px solid rgba(255,255,255,0.1)', paddingBottom: '5px'}}>死亡设置</h4>
        <div className="row mb-4">
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="disablePlayerRespawn" 
                label="禁用玩家重生" 
                checked={localConfig.disablePlayerRespawn === 1} 
                onChange={() => handleConfigChange('disablePlayerRespawn', localConfig.disablePlayerRespawn === 1 ? 0 : 1)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                玩家死亡后不会自动重生（硬核模式）
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="disableDeathScreen" 
                label="禁用死亡屏幕" 
                checked={localConfig.disableDeathScreen === 1} 
                onChange={() => handleConfigChange('disableDeathScreen', localConfig.disableDeathScreen === 1 ? 0 : 1)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                玩家死亡后直接返回主菜单
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="disableRadar" 
                label="禁用雷达" 
                checked={localConfig.disableRadar === 1} 
                onChange={() => handleConfigChange('disableRadar', localConfig.disableRadar === 1 ? 0 : 1)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                启用后将禁用游戏中的雷达功能，玩家将无法使用雷达探测周围环境和其他玩家
              </Form.Text>
            </Form.Group>
          </div>
        </div>

        {/* 天气和视觉设置 */}
        <h4 style={{color: '#ff6b6b', marginBottom: '15px', borderBottom: '1px solid rgba(255,255,255,0.1)', paddingBottom: '5px'}}>天气和视觉设置</h4>
        <div className="row mb-4">
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="disableDynamicWeather" 
                label="禁用动态天气" 
                checked={localConfig.disableDynamicWeather === 1} 
                onChange={() => handleConfigChange('disableDynamicWeather', localConfig.disableDynamicWeather === 1 ? 0 : 1)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                禁用服务器动态天气变化
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>天气持续时间 (分钟)</Form.Label>
              <Form.Control
                type="number"
                value={localConfig.weatherDuration}
                onChange={(e) => handleConfigChange('weatherDuration', parseInt(e.target.value) || 120)}
                min="30"
                max="480"
                className="glass-input"
                style={{ backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff' }}
              />
              <Form.Text className="text-muted" style={{ color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem' }}>
                每种天气状态持续的分钟数
              </Form.Text>
            </Form.Group>
          </div>
        </div>
        <div className="row mb-4">
          <div className="col-md-6">
            <Form.Check 
              type="switch" 
              id="weatherForecast" 
              label="启用天气预报" 
              checked={localConfig.weatherForecast === 1} 
              onChange={() => handleConfigChange('weatherForecast', localConfig.weatherForecast === 1 ? 0 : 1)} 
              className="form-switch-glow"
            />
            <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
              允许玩家查看天气预报
            </Form.Text>
          </div>
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>最大风力等级</Form.Label>
              <Form.Control
                type="number"
                value={localConfig.maxWindStrength}
                onChange={(e) => handleConfigChange('maxWindStrength', parseInt(e.target.value) || 5)}
                min="0"
                max="10"
                className="glass-input"
                style={{ backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff' }}
              />
              <Form.Text className="text-muted" style={{ color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem' }}>
                服务器上的最大风力等级（0-10）
              </Form.Text>
            </Form.Group>
          </div>
        </div>
        <div className="row mb-4">
          <div className="col-md-6">
            <Form.Check 
              type="switch" 
              id="nightVisionEnabled" 
              label="启用夜视仪" 
              checked={localConfig.nightVisionEnabled === 1} 
              onChange={() => handleConfigChange('nightVisionEnabled', localConfig.nightVisionEnabled === 1 ? 0 : 1)} 
              className="form-switch-glow"
            />
            <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
              允许玩家使用夜视仪
            </Form.Text>
          </div>
          <div className="col-md-6">
            <Form.Check 
              type="switch" 
              id="thermalVisionEnabled" 
              label="启用热成像" 
              checked={localConfig.thermalVisionEnabled === 1} 
              onChange={() => handleConfigChange('thermalVisionEnabled', localConfig.thermalVisionEnabled === 1 ? 0 : 1)} 
              className="form-switch-glow"
            />
            <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
              允许玩家使用热成像设备
            </Form.Text>
          </div>
        </div>

        {/* 袭击警告设置 */}
        <h4 style={{color: '#ff6b6b', marginBottom: '15px', borderBottom: '1px solid rgba(255,255,255,0.1)', paddingBottom: '5px'}}>袭击警告设置</h4>
        <div className="row mb-4">
          <div className="col-md-6">
            <Form.Check 
              type="switch" 
              id="disableRaidWarning" 
              label="禁用袭击警告" 
              checked={localConfig.disableRaidWarning === 1} 
              onChange={() => handleConfigChange('disableRaidWarning', localConfig.disableRaidWarning === 1 ? 0 : 1)} 
              className="form-switch-glow"
            />
            <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
              禁用玩家建筑被袭击时的警告提示
            </Form.Text>
          </div>
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>袭击警告延迟 (秒)</Form.Label>
              <Form.Control
                type="number"
                value={localConfig.raidWarningDelay}
                onChange={(e) => handleConfigChange('raidWarningDelay', parseInt(e.target.value) || 10)}
                min="0"
                max="60"
                className="glass-input"
                style={{ backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff' }}
              />
              <Form.Text className="text-muted" style={{ color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem' }}>
                建筑被袭击到发出警告的延迟时间
              </Form.Text>
            </Form.Group>
          </div>
        </div>
      </Card.Body>
    </Card>
  );
};

export default GameExperienceSettings;